<template>
  <view class="content">
    <!-- 已买到的货品 -->
    <view class="item" v-for="(item, index) in tableData" :key="index">
      <view class="item_1">
        <view class="left">
          <image
            :src="Domain_IMG + item.Picture_URL"
            alt="商品图片"
            class="img"
          />
        </view>
        <view class="right">
          <view class="right1">
            <view class="Article_Name">{{ item.Article_Name }}</view>
            <view class="Payment_Name">{{ item.Payment_Name }}</view>
            <view class="Pay_Status">￥{{ item.Pay_Status }}</view>
          </view>
          <view class="right2">
            <el-button round size="mini">去店铺</el-button>
            <el-button round size="mini">找相似</el-button>
          </view>
        </view>
      </view>
      <!--  -->
    </view>
  </view>
</template>

<script>
const app = getApp();
import { getGroupTransactionAllAction } from "@/api/purchasedgoods.js";
export default {
  data() {
    return {
      Domain_IMG: app.globalData.Domain_IMG,
      tableData: [],
      parameter: {
        Type: "0",
        Group_Purchasing_SerialNumber: "",
        Enterprise_Info_SerialNumber: uni.getStorageSync("enterprise"),
        page: 1, //页数
        limit: 10, //每页数据条数
      },
      limit: 0,
    };
  },
  methods: {
    async purchasedGoods(data) {
      const res = await getGroupTransactionAllAction({
        data,
      });
      this.tableData = res.tableData;
      this.limit = Number(res.limit);
    },
  },
  created() {
    this.purchasedGoods(this.parameter);
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding: 40rpx;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
  .item {
    width: 100%;
    margin-bottom: 20rpx;
    border-radius: 20rpx;
    background-color: #fff;
    padding: 20rpx;
    box-sizing: border-box;
    .item_1 {
      display: flex;
      .left {
        width: 280rpx;
        height: 280rpx;
        padding: 10rpx;
        box-sizing: border-box;
        image {
          width: 100%;
          height: 100%;
          border-radius: 20rpx;
        }
      }
      .right {
        border-radius: 0 20rpx 20rpx 0;
        flex: 1;
        display: flex;
        padding: 20rpx;
        box-sizing: border-box;
        flex-direction: column;
        .right1 {
          width: 80%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .Article_Name {
            white-space: pre;
            line-height: 17px;
            overflow: hidden;
            text-overflow: ellipsis;
            color: rgb(17, 17, 17);
            font-weight: bold;
          }
          .Payment_Name {
            color: rgb(156, 156, 156);
            font-size: 24rpx;
          }
          .Pay_Status {
            color: red;
          }
        }
        .right2 {
          margin-top: 30rpx;
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
        }
      }
    }
  }
}
</style>
